import { useNavigate } from 'react-router-dom';
import './details.scss';
import { Button, DatePicker, Row, Col, Spin, Image } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import { Dayjs } from 'dayjs';
import { useEffect, useState } from 'react';
// import UserEvent from '@/components/userEvent';
import { userDetail } from '@/api/user';
import Pagination from '@/components/pagination';
import moment from 'moment';
interface DataType {
    pic: string;
    firstName: string;
    lastName: string;
    userMobile: string;
    createTime: number;
    disabled: boolean;
    userId: string;
}
const UserDetails = () => {
    const link = useNavigate();
    const userId = sessionStorage.getItem('userId') || '';
    console.log(userId, '这里的id');
    const [userData, setUserData] = useState<any>({});

    const [userImg, setUserImg] = useState<string[]>([require('@/assets/images/logo.png')]);
    const [selectBtnList, setSelectBtnList] = useState<
        {
            tagName: string;
            selectFlag: boolean;
        }[]
    >([]);
    useEffect(() => {
        getUserInfo();
    }, [userId]);
    const getUserInfo = async () => {
        const params = {
            userId: userId,
        };
        userDetail(params).then((res: any) => {
            const langListText: any = [];
            if (res.languages) {
                res.languages.map((item: any) => {
                    if (item == 'zh_CN') {
                        langListText.push('中文');
                    } else {
                        langListText.push('英语');
                    }
                });
            }
            res.eqTestTime =
                res.eqTestTime && res.eqTestTime !== '0' ? moment(res.eqTestTime).format('DD/MM/YYYY HH:mm') : '-';
            res.langText = langListText.join(',');
            res.eqSkillText = res.eqSkillTypeNames ? res.eqSkillTypeNames.join(',') : '-';
            // createTime
            res.createTime =
                res.createTime && res.createTime !== '0' ? moment(res.createTime).format('DD/MM/YYYY HH:mm') : '-';
            res.lastActiveTime =
                res.lastActiveTime && res.lastActiveTime !== '0'
                    ? moment(res.lastActiveTime).format('DD/MM/YYYY HH:mm')
                    : '-';
            if (res.userGender == 1) {
                res.userGenderText = 'Male';
            } else if (res.userGender == 2) {
                res.userGenderText = 'Female';
            } else {
                res.userGenderText = '-';
            }
            setUserData(res);
            setUserImg(res.photos);
            setSelectBtnList(res.interests);
            setSelectImgBtnList(res.skills);
        });
    };
    const changeSelect = (e: any) => {
        setSelectBtnList(state =>
            state.map(item => {
                if (item.tagName == e.text) {
                    return {
                        ...item,
                        selectFlag: true,
                    };
                } else {
                    return {
                        ...item,
                        selectFlag: false,
                    };
                }
            })
        );
    };
    const [selectImgBtnList, setSelectImgBtnList] = useState<
        {
            tagName: string;
            selectFlag: boolean;
            skillProficiency: string;
        }[]
    >([]);
    const changeImgSelect = (e: any) => {
        setSelectBtnList(state =>
            state.map(item => {
                if (item.tagName == e.text) {
                    return {
                        ...item,
                        selectFlag: true,
                    };
                } else {
                    return {
                        ...item,
                        selectFlag: false,
                    };
                }
            })
        );
    };
    const { RangePicker } = DatePicker;
    const [selectedDate, setSelectedDate] = useState<[Dayjs, Dayjs]>([dayjs(), dayjs()]);
    const disabledDate: RangePickerProps['disabledDate'] = current => {
        return current && current > dayjs().endOf('day');
    };
    // 处理日期变化
    const dateOnChange = date => {
        setSelectedDate(date);
    };
    const [listParams, setListParams] = useState({
        pageNum: 1,
    });
    const [loading, setLoading] = useState(false);
    const [totalRecord, setTotalRecord] = useState(12);
    const [tableData, setTableData] = useState<DataType[]>([
        {
            pic: '',
            firstName: 'winnie',
            lastName: 'lu',
            userMobile: '0412 345 678',
            createTime: 1731043414000,
            disabled: true,
            userId: '12131414',
        },
        {
            pic: '',
            firstName: 'alex',
            lastName: 'lu',
            userMobile: '0412 345 678',
            createTime: 1731043414000,
            disabled: true,
            userId: '12134235235',
        },
    ]);
    const handlePageChange = prop => {
        setListParams(state => ({ ...state, pageNum: prop }));
    };
    const toEdit = () => {
        link('/user/edit');
    };
    const [userModal, setUserModal] = useState({ open: false, isDelete: false });
    const dateFormat = 'YYYY-MM-DD';
    return (
        <div className="page-main user-details">
            <div className="user-header flex-left">
                {/* <div className="user-header-title">Individual user</div>
                <div className="user-header-text">
                    <span onClick={() => link('/user')}>User Management</span>
                    {` > ${userId}`}
                </div> */}
                <div className="backIconBox" onClick={() => link('/user')}>
                    <img src={require('@/assets/images/arrowLeft.png')} alt="" />
                </div>
                <div className="user-header-title">User details</div>
            </div>
            <div className="middleBox">
                <div className="userDetailBox flex-left">
                    <div className="userPic">
                        <img src={userData.avatar || require('@/assets/images/11.png')} alt="" />
                    </div>
                    <div className="userInfo">
                        <div className="userRightTop">{userData.fullName || '-'}</div>
                        <div className="userMiddle">{userData.nickname || '-'}</div>
                        <div className="userBottom flex-left">
                            <div className="userBottomItem flex-left">
                                <div>
                                    <img src={require('@/assets/images/genderIcon.png')} alt="" />
                                </div>
                                <div>{userData.userGenderText || '-'}</div>
                            </div>
                            <div className="userBottomItem flex-left">
                                <div>
                                    <img src={require('@/assets/images/birthdayIcon.png')} alt="" />
                                </div>
                                <div>{userData.age || 0}</div>
                            </div>
                            <div className="userBottomItem flex-left">
                                <div>
                                    <img src={require('@/assets/images/mobileIcon.png')} alt="" />
                                </div>
                                <div>{userData.userMobile || '-'}</div>
                            </div>
                            <div className="userBottomItem flex-left">
                                <div>
                                    <img src={require('@/assets/images/mbti2.png')} alt="" />
                                </div>
                                <div>{userData.personality || '-'}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="aboutBox whiteBox">
                    <div className="minTitleBox">About myself</div>
                    <div className="aboutContent">{userData.bio || '-'}</div>
                </div>
                <div className="picturesBox whiteBox">
                    <div className="minTitleBox">Pictures</div>
                    <div className="picturesContent flex-left">
                        {userImg.map(item => {
                            return (
                                <div className="picturesItem" key={item}>
                                    <img src={item} alt="" />
                                </div>
                            );
                        })}
                        {/* {userImg.map(item => {
                            return (
                                <div className="picturesItem" key={item}>
                                    <Image
                                        rootClassName="previewBox"
                                        preview={{ getContainer: false }}
                                        src={item}
                                        height="100%"
                                        width="100%"
                                    />
                                </div>
                            );
                        })} */}
                    </div>
                </div>
                <div className="basicBox whiteBox">
                    <div className="minTitleBox">Basic information</div>
                    <div className="baseContent flex-left">
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Occupation</div>
                            <div className="baseitemContent">{userData.occupation || '-'}</div>
                        </div>
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Location</div>
                            <div className="baseitemContent">
                                {userData.currentProvinceName} {userData.currentCityName} {userData.currentDistrictName}
                            </div>
                        </div>
                        {/* <div className="basicItem">
                            <div className="baseItemTopTitle">Height</div>
                            <div className="baseitemContent">180</div>
                        </div> */}
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Hometown</div>
                            <div className="baseitemContent">
                                {userData.hometownProvinceName} {userData.hometownCityName}{' '}
                                {userData.hometownDistrictName}
                            </div>
                        </div>
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Languages</div>
                            <div className="baseitemContent">{userData.langText || '-'}</div>
                        </div>
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Relationship status</div>
                            <div className="baseitemContent">{userData.disabled ? 'Suspend' : 'Active'}</div>
                        </div>
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Creation time</div>
                            <div className="baseitemContent">{userData.createTime || '-'}</div>
                        </div>
                        <div className="basicItem">
                            <div className="baseItemTopTitle">Last used the APP</div>
                            <div className="baseitemContent">{userData.lastActiveTime || '-'}</div>
                        </div>
                    </div>
                </div>
                <div className="advancedBox whiteBox">
                    <div className="minTitleBox">Advanced data</div>
                    <div className="advancedContent flex-left">
                        <div className="advancedItem">
                            <div className="advancedItemTopTitle">EQ test score</div>
                            <div className="advanceditemContent">{userData.eqTestScore || 0}</div>
                        </div>
                        <div className="advancedItem">
                            <div className="advancedItemTopTitle">EQ test date and time</div>
                            <div className="advanceditemContent">{userData.eqTestTime || '-'}</div>
                        </div>
                        <div className="advancedItem">
                            <div className="advancedItemTopTitle">Techniques nominated</div>
                            <div className="advanceditemContent">{userData.eqSkillText || '-'}</div>
                        </div>
                    </div>
                </div>
                <div className="socialBox whiteBox">
                    <div className="minTitleBox">Social Information</div>
                    <div className="socialContent flex-left">
                        <div className="socialItem">
                            <div className="socialItemTopTitle">Number of blocked users</div>
                            <div className="socialItemContent">{userData.numberOfBlockUsers || 0}</div>
                        </div>
                        <div className="socialItem">
                            <div className="socialItemTopTitle">Number of friends</div>
                            <div className="socialItemContent">{userData.numberOfFriends || 0}</div>
                        </div>
                        <div className="socialItem">
                            <div className="socialItemTopTitle">Number of matches</div>
                            <div className="socialItemContent">{userData.numberOfMatches || 0}</div>
                        </div>
                    </div>
                </div>
                <div className="interestBox whiteBox">
                    <div className="minTitleBox">Interest and skills/knowledge</div>
                    <div className="interestTip">Interest</div>
                    <div className="select-bar">
                        {selectBtnList.map((item, index) => {
                            return (
                                <div className={`select-i ${item.selectFlag ? 'selected' : ''}`} key={index}>
                                    <div>{item.tagName}</div>
                                </div>
                            );
                        })}
                    </div>
                    <div className="interestTip">Skills/knowledge</div>
                    <div className="selectBarSkill">
                        {selectImgBtnList.map((item, index) => {
                            return (
                                <div
                                    className={`select-i flex-left ${item.selectFlag ? 'selected' : ''}`}
                                    // onClick={() => changeSelect(item)}
                                    key={index}
                                >
                                    <div className="skillImgBox">
                                        {/* <img src={item.img} /> */}
                                        <img src={require(`@/assets/images/${item.skillProficiency}.png`)} />
                                    </div>
                                    <div>{item.tagName}</div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};
export default UserDetails;
